<template>
<div class="login_box">
  <div class="image_box">
    <img src="src/assets/宇航员.png">
  </div>
  <el-form class="login_form" :model="loginForm">
    <h2>科研导航</h2>
    <el-form-item label="账号">
      <el-input v-model="loginForm.name" />
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="loginForm.password" />
    </el-form-item>
    <el-form-item class="login_form_footer">
      <el-button type="primary" @click="onSubmit">登录</el-button>
    </el-form-item>
  </el-form>
</div>
</template>

<script setup lang="ts">
import {reactive} from "vue";
import router from "../../router";
import {login} from "../../api/login";
import {ElMessage} from "element-plus";

const loginForm = reactive({
  name: '',
  password:'',
})

const onSubmit = () => {
  login(loginForm).then(res=>{
        console.log(res)
    if(res.status=='200'){
      ElMessage.success(res.msg)
      router.push('/home')
      window.localStorage.setItem('token',res.token)
      window.localStorage.setItem('user_info',loginForm.name)
    }else{
      ElMessage.error(res.msg)
    }
  }

  )
}
</script>

<style scoped>
.login_box{
  width: 60%;
  height: 50%;
  margin-left: 20%;
  margin-top: 10%;
  padding: 2%;
  box-shadow: rgba(0, 0, 0, 0.1) 0 4px 6px -1px, rgba(0, 0, 0, 0.06) 0 2px 4px -1px;
  display: flex;
  flex-direction: row;
}
.image_box{
  flex: 1;

  border-right: 1px solid #252525;
}
img{
  width: 100%;
}
.login_form{
  padding-left: 2%;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
.el-form-item{
  width: 300px;
}
</style>